<template>
  <div class="svg_full">
    <img :src="svgPath" title="切换全屏" @click="toggleFull"/>
  </div>
</template>

<script setup>
import screenfull from 'screenfull'
import { computed, onMounted, onUnmounted, ref } from "vue";
import { binMsg } from '@/global/api.js';

const isFull = ref(false)

// 动态计算svg图片
const svgPath = computed(() => {
  return isFull.value ? require('@/assets/svg/exit-fullscreen.svg') 
  : require('@/assets/svg/fullscreen.svg') 
})

// 切换全屏显示
const toggleFull = () => {
  if (!screenfull.enabled) { 
    return binMsg('warning', '你的浏览器不支持全屏！')
  }
  screenfull.toggle()
}

// 切换 isFull 的值
const change = () => {
  isFull.value = screenfull.isFullscreen
}

// 注册事件，只要屏幕全屏状态一改变就会调用
const init = () => {
  if (screenfull.enabled) {
    screenfull.on('change', change)
  }
}

// 移除事件
const destroy = () => {
  if (screenfull.enabled) {
    screenfull.off('change', change)
  }
}

onMounted(() => {
  init()
})

onUnmounted(() => {
  destroy()
})
</script>

<style lang="less" scoped>
.svg_full {
  padding-right: 25px;
  img {
    width: 20px;
    height: 100%;
    color: #8a919f;
  }
  img:hover {
    cursor: pointer;
  }
}
</style>